<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">工业园区统计报表</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                >
                    <div class="field">
                        <label for="searchApplicantName" class="p-sr-only"
                            >选择时间段</label
                        >
                        <!--input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="选择时间段"
                            pTooltip="选择时间段"
                        /-->
                        <p-dropdown [options]="timeTypes" optionLabel="lable" optionValue="value" [(ngModel)]="searchTimeType"></p-dropdown>
                    </div>
                    <div class="field" *ngIf="searchTimeType=='日'">
                        <label for="searchApplicantName" class="p-sr-only"
                            >选择某天</label
                        >
                        <!--input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="选择某天"
                            pTooltip="选择某天"
                        /-->
                        <p-calendar [(ngModel)]="searchTime" [readonlyInput]="true" dateFormat="yy年mm月dd日" inputId="monthpicker" placeholder="选择某天"></p-calendar>
                    </div>
                    <div class="field" *ngIf="searchTimeType=='月'">
                        <label for="searchApplicantName" class="p-sr-only"
                            >选择某月</label
                        >
                        <!--input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="选择某月"
                            pTooltip="选择某月"
                        /-->
                        <p-calendar [(ngModel)]="searchTime" view="month" dateFormat="yy年mm月" [readonlyInput]="true" inputId="monthpicker" placeholder="选择某月"></p-calendar>
                    </div>
                    <div class="field" *ngIf="searchTimeType=='年'">
                        <label for="searchApplicantName" class="p-sr-only"
                            >选择某年</label
                        >
                        <!--input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="选择某年"
                            pTooltip="选择某年"
                        /-->
                        <p-calendar [(ngModel)]="searchTime" view="year" dateFormat="yy年" inputId="yearpicker" placeholder="选择某年"></p-calendar>
                    </div>
                </div>

                <div class="p-toolbar-group-right formgroup-inline">
                    <div class="field">
                        <p-button label="查询" icon="pi pi-search" (click)="search()"></p-button>
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="重置"
                            class="p-button-secondary"
                            (click)="handleReset()"
                        ></button>
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="导出"
                        ></button>
                    </div>
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="col-12">
        <div class="card" style="min-height:625px">
            <p-table
                #dt1
                [value]="data"
                [rowHover]="true"
                [rows]="10"
                [paginator]="true"
                [rowsPerPageOptions]="[10, 25, 50]"
                scrollDirection="both"
                [scrollable]="true"
                responsiveLayout="scroll"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th width="20%">序号</th>
                        <th width="40%">工业园区</th>
                        <th width="40%">用水量(万m³)</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-item>
                    <tr>
                        <td width="20%">
                            {{ item.id }}
                        </td>
                        <td width="40%">
                            {{ item.name }}
                        </td>
                        <td width="40%">
                            {{ item.volume }}
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage">
                    <tr>
                        <td colspan="7">没有找到配额信息</td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="loadingbody">
                    <tr>
                        <td colspan="7">正在加载配额信息，请稍等</td>
                    </tr>
                </ng-template>
            </p-table>
            <div class="sum">
                <p>总累计水量（万m³）：</p>
                <p>{{ waterSum }}</p>
            </div>
        </div>
    </div>
</div>
